<script setup lang="ts">
import {ref, reactive} from "vue";
import {useRouter} from "vue-router";
import {getPublicJobs} from "@/api/job.js";
import {getCompanyPersonalInfoService} from "@/api/user";
const router = useRouter();

const companyInfo = ref({
  companyId: 'C001',
  name: '未来科技有限公司',
  phone: '0755-88888888',
  introduction: '未来科技有限公司成立于2010年，是一家专注于人工智能、大数据分析的高新技术企业。我们致力于为客户提供前沿的技术解决方案，帮助企业实现数字化转型。',
  status: '正常运营',
  size: '1000-5000人',
  address: '中国广东省深圳市南山区科技园',
  companyType: '私营有限责任公司'
});

const jobList = ref([
  {
    jobId: 'J001',
    location: '北京市海淀区',
    hr: '李华',
    tags: '全职, 技术开发, AI算法',
    name: 'AI算法工程师',
    salary: '月薪20k-30k',
    companyName: '智慧之星科技有限公司',
    description: '我们正在寻找一位热情的AI算法工程师，负责开发和优化公司的核心算法产品。要求熟悉深度学习框架，有自然语言处理或计算机视觉项目经验。'
  },
]);

async function getPublicJobList() {
  let res = await getCompanyPersonalInfoService()
  companyInfo.value = res.data
   // 这里可以调用后端接口获取数据，并更新jobList变量
  console.log("公司id：", companyInfo.value.companyId)
  let result = await getPublicJobs(companyInfo.value.companyId);
  jobList.value = result.data;
}

getPublicJobList();

const deleteJob = (index, event) => {
  event.stopPropagation(); // 阻止事件冒泡
  jobList.value.splice(index, 1);
};

const navigateToJob = (jobId: string) => {
  // 如果你使用的是Vue Router，这里可以直接使用this.$router.push
  // 但因为在<script setup>语法糖中，我们直接使用Vue Router提供的useRouter
  router.push(`/CompanyResumeManage/${jobId}`);
};


// 添加新的变量和函数
const dialogVisible = ref(false); // 控制弹窗的可见性
const postJobFormRef = ref(null); // 表单引用
const newJob = reactive({ // 新职位的初始数据结构
  jobId: '', // 实际情况下，这可能是从后端生成或自增的
  name: '',
  companyName: '',
  hr: '',
  tagsArray: [''],
  location: '',
  salary: '',
  description: ''
});

// 显示发布职位的模态对话框
const showPostJobModal = () => {
  dialogVisible.value = true;
};

// 发布新职位的处理函数
const postJob = () => {
  // 这里可以添加表单验证逻辑，然后调用API发布新职位
  // 示例逻辑，实际需替换为你的API调用
  if (validateForm()) {
    // 假设validateForm()是你的表单验证函数
    // 发布职位逻辑...
    console.log('新职位数据:', newJob);
    dialogVisible.value = false;
    // 可以在这里调用后端接口，发送newJob的数据
  }
};

// 简化的表单验证逻辑示例
const validateForm = () => {
  // 实现你的表单验证逻辑
  return true; // 这里简化处理，实际应根据表单项进行验证
};

// 添加新标签输入框的方法
const addTagField = () => {
  newJob.tagsArray.push('');
};
</script>

<template>
  <div class="col-lg-8">
    <div class="candidates-alert-jobs-content">
      <h3>职位管理</h3>

      <!-- 添加一个发布职位按钮 -->
      <el-button  @click="showPostJobModal" class="publish-btn">发布职位</el-button>

<!--      &lt;!&ndash; 弹窗组件 &ndash;&gt;-->
<!--      <el-dialog-->
<!--          v-model="dialogVisible"-->
<!--          title="发布新职位"-->
<!--          width="50%"-->
<!--      >-->
<!--        <el-form ref="postJobFormRef" :model="newJob" label-width="120px">-->
<!--          <el-form-item label="职位名">-->
<!--            <el-input v-model="newJob.name"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="HR">-->
<!--            <el-input v-model="newJob.hr"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="标签">-->
<!--            <div v-for="(tag, tagIndex) in newJob.tagsArray" :key="tagIndex">-->
<!--              <el-input v-model="newJob.tagsArray[tagIndex]" placeholder="请输入标签"></el-input>-->
<!--              <el-button-->
<!--                  v-if="tagIndex === newJob.tagsArray.length - 1"-->
<!--                  type="text"-->
<!--                  icon="el-icon-plus"-->
<!--                  circle-->
<!--                  @click="addTagField"-->
<!--                  size="small"-->
<!--                  class="custom-add-button-with-text"-->
<!--              >-->
<!--                <span class="button-text">添加标签</span>-->
<!--              </el-button>-->
<!--            </div>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="地址">-->
<!--            <el-input v-model="newJob.location"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="工资">-->
<!--            <el-input v-model="newJob.salary"></el-input>-->
<!--          </el-form-item>-->
<!--          <el-form-item label="职位描述">-->
<!--            <el-input type="textarea" v-model="newJob.description"></el-input>-->
<!--          </el-form-item>-->
<!--        </el-form>-->
<!--        <template #footer>-->
<!--  <span class="dialog-footer">-->
<!--    <el-button type="text" class="cancel-btn" @click="dialogVisible = false">取消</el-button>-->
<!--    <el-button type="primary" class="publish-btn" @click="postJob">发布</el-button>-->
<!--  </span>-->
<!--        </template>-->
<!--      </el-dialog>-->

      <el-row v-for="(job, index) in jobList" :key="index" class="hot-jobs-list-items">

        <el-col :span="24" class="hot-jobs-list-item">
          <el-card shadow="hover" @click="navigateToJob(job.jobId)">
            <el-descriptions class="mb-3" :column="1">
              <el-descriptions-item label="职位名：">{{ job.name }}</el-descriptions-item>
              <el-descriptions-item label="公司名">{{ job.companyName }}</el-descriptions-item>
              <el-descriptions-item label="HR：">{{ job.hr }}</el-descriptions-item>
              <el-descriptions-item label="标签：">{{ job.tags }}</el-descriptions-item>
              <el-descriptions-item label="地址：">{{ job.location }}</el-descriptions-item>
              <el-descriptions-item label="工资：">{{ job.salary }}</el-descriptions-item>
              <el-descriptions-item label="职位描述：">{{ job.description.slice(0, 35) + '...' }}</el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-col>

        <el-col :span="24" class="text-right actions">
          <el-popover
              placement="top"
              title="确认删除？"
              width="160"
              trigger="click"
          >
            <template #reference>
              <el-button type="text" danger class="delete-button">
                <i class="el-icon-delete"></i>
                删除
              </el-button>
            </template>
            <template #default>
              <div>
                <p>此操作不可逆，请确认是否删除。</p>
              </div>
              <div style="text-align: right; margin-top: 20px;">
                <el-button size="small" text @click="$event.stopPropagation()">取消</el-button>
                <el-button size="small" type="danger" @click="deleteJob(index, $event)">确定</el-button>
              </div>
            </template>
          </el-popover>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<style scoped>
@import "@/assets/css/bootstrap.min.css";
@import "@/assets/css/owl.theme.default.min.css";
@import "@/assets/css/owl.carousel.min.css";
@import "@/assets/css/animate.min.css";
@import "@/assets/css/boxicons.min.css";
@import "@/assets/css/magnific-popup.min.css";
@import "@/assets/css/flaticon.css";
@import "@/assets/css/meanmenu.min.css";
@import "@/assets/css/nice-select.min.css";
@import "@/assets/css/odometer.min.css";
@import "@/assets/css/date-picker.min.css";
@import "@/assets/css/muli-fonts.css";
@import "@/assets/css/style2.css";
@import "@/assets/css/responsive2.css";
@import "@/assets/css/guidepage.css";

.hot-jobs-list-items {
  margin-bottom: 20px; /* 可以根据需要调整间距 */
}

.actions {
  text-align: right;
  margin-top: 10px; /* 调整动作按钮与内容之间的距离 */
}

.hot-jobs-list-item:hover {
  background-color: rgba(0, 0, 0, 0.05); /* 鼠标悬停时的背景颜色，透明度可调整 */
  transition: background-color 0.3s; /* 平滑过渡 */
}

.hot-jobs-list-item:active {
  background-color: rgba(0, 0, 0, 0.1); /* 鼠标点击时的背景颜色，比悬停时更深 */
}

.delete-button {
  border: 1px solid #f56c6c; /* 红色边框 */
  border-radius: 4px; /* 圆角 */
  padding: 4px 10px; /* 内边距，可以根据需要调整 */
  color: #f56c6c; /* 文本颜色也为红色 */
  background-color: transparent; /* 透明背景 */
  transition: all 0.3s; /* 平滑过渡效果 */
}

.delete-button:hover {
  background-color: #f56c6c; /* 鼠标悬停时背景变为红色 */
  color: #fff; /* 文本颜色变为白色 */
}

/* 美化加号按钮 */
.custom-add-button {
  color: whitesmoke;
  background-color: #409EFF; /* 设置图标和文本颜色 */
  border-color: transparent; /* 透明边框以实现无边框效果 */

  transition: all 0.3s ease; /* 添加过渡动画效果 */
  justify-content: center;
  align-items: center;
}

.custom-add-button:hover {
  color: #66b1ff; /* 鼠标悬停时改变颜色，增强交互反馈 */
  background-color: rgba(64, 158, 255, 0.1); /* 添加微妙的背景色 */
  cursor: pointer; /* 更改鼠标指针为手型 */
}

.custom-add-button-with-text {
  /* 由于Element Plus的圆形按钮设计默认不包含文本，这里需要自定义样式来尝试容纳文本 */
  margin-left: 10px;
  justify-content: center;
  align-items: center;
  width: 32px; /* 你需要根据文字大小调整宽度 */
  height: 32px; /* 同样，调整高度以适应内容 */

}

.button-text {
  /* 确保文字在按钮中居中 */
  display: inline-block;
  font-size: 12px; /* 根据需要调整字体大小 */
  line-height: 1; /* 保证文本垂直居中 */
}


.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

/* 圆角矩形样式 */
.border-radius-btn {
  border-radius: 8px; /* 添加此行来设定圆角 */
}

/* 自定义取消按钮样式 */
.cancel-btn {
  color: #999;
  background-color: transparent;
  border-color: #dcdfe6;
  margin-right: 10px;
  border-radius: 8px; /* 应用圆角 */
}

.cancel-btn:hover {
  color: #666;
  border-color: #c0ccda;
}

/* 自定义发布按钮样式 */
.publish-btn {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  border-radius: 8px; /* 应用圆角 */
  width: 100px;
  margin-bottom: 10px;
}

.publish-btn:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}



.candidates-dashboard {
  width: 275%;
}

.field-top {
  display: flex;
  justify-content: space-between; /* 两端对齐，使内容分散在容器两侧 */
  align-items: center; /* 垂直居中对齐 */

  width: 100%;
  border: 1px solid #007bff; /* 蓝色边框 */
  border-radius: 4px; /* 可选，为元素添加圆角以提升美观度 */
  padding: 16px; /* 可选，增加内边距以便内容更加舒适 */
  margin-bottom: 16px; /* 可选，为下方元素留出空间 */
}

/* 美化field-top的标题 */
.field-top-title {
  font-size: 16px;
  font-weight: bold;
  color: #333; /* 或使用变量以保持主题一致性 */
  margin-bottom: 8px; /* 在标题与内容之间添加一些间距 */
}

/* 调整数字显示样式，使其更加突出 */
.field-top span {
  font-size: 24px;
  font-weight: bold;
  color: #007bff; /* 与边框颜色相呼应 */
  display: block;
  margin-top: 4px;
}

.col-lg-8 {

  margin-bottom: 20px;
}

.candidates-alert-jobs-content {
  width: 155%;
}



</style>